<script setup lang="ts" name="ImportTable">
import { QForm, QTable, type FormItemRows, type TableColums } from '@meetjs/element-plus-kit'
import { getDbList, importTable } from '@/api/code/gen/index'
import { formatDate } from '@/utils/day'
import type { DBList } from '@/api/code/gen/type'

const emit = defineEmits<{
	refresh: []
}>()

// form
const formValue = ref({
	tableName: '',
	tableComment: ''
})
const formOptions = ref<FormItemRows[]>([
	{
		type: 'input',
		label: '表名称',
		prop: 'tableName'
	},
	{
		type: 'input',
		label: '表描述',
		prop: 'tableComment'
	}
])

// table
const loading = ref(false)
const page = ref({
	currentPage: 1,
	pageSize: 10,
	total: 0
})
const tableData = ref<DBList[]>([])
const dialogSelectList = ref<string[]>([])

const columns = ref<TableColums[]>([
	{
		type: 'selection',
		align: 'center'
	},
	{
		label: '表名称',
		prop: 'tableName',
		showOverflowTooltip: true
	},
	{
		label: '表描述',
		prop: 'tableComment'
	},
	{
		label: '创建时间',
		prop: 'createTime',
		formatter: v => formatDate(v.createTime)
	},
	{
		label: '更新时间',
		prop: 'updateTime',
		formatter: v => formatDate(v.updateTime)
	}
])

const visible = ref(false)
const btnLoading = ref(false)

const getTableData = async () => {
	try {
		loading.value = true
		const params = {
			pageNum: page.value.currentPage,
			pageSize: page.value.pageSize,
			tableName: formValue.value.tableName,
			tableComment: formValue.value.tableComment
		}
		const res = await getDbList(params)
		tableData.value = res.data.rows
		page.value.total = res.data.total
	} finally {
		loading.value = false
	}
}

const handleSelectionChange = (val: DBList[]) => {
	dialogSelectList.value = val.map(item => item.tableName)
}

function dialogCancel() {
	visible.value = false
}

const init = () => {
	visible.value = true
	dialogSelectList.value = []
	getTableData()
}

async function dialogSubmit() {
	try {
		btnLoading.value = true
		if (!dialogSelectList.value.length) {
			ElMessage.error('请选择要导入的表')
			return
		}

		const result = await importTable({ tables: dialogSelectList.value.join(',') })
		ElMessage.success(result.msg)
		visible.value = false
		emit('refresh')
	} finally {
		btnLoading.value = false
	}
}

defineExpose({
	init
})
</script>

<template>
	<ElDialog
		v-model="visible"
		title="导入表"
		:close-on-click-modal="false"
		width="900px"
		@cancel="dialogCancel"
	>
		<div class="table-page-box h-[60vh]">
			<div class="filter-box">
				<QForm
					inline
					:model="formValue"
					:form-options="formOptions"
					:buttons="['search', 'reset']"
					@search="getTableData"
					@reset="getTableData"
				/>
			</div>
			<div class="table-box">
				<QTable
					:data="tableData"
					:columns="columns"
					:page="page"
					:loading="loading"
					style="width: 100%"
					@pageChange="getTableData"
					@selectionChange="handleSelectionChange"
				/>
			</div>
		</div>
		<template #footer>
			<el-button @click="dialogCancel">取消</el-button>
			<el-button
				type="primary"
				:disabled="!dialogSelectList.length"
				:loading="btnLoading"
				@click="dialogSubmit"
			>
				确定
			</el-button>
		</template>
	</ElDialog>
</template>
